<template>
  <el-card class="add-exam" v-loading="loading">
    <el-form ref="add-exam-form" :model="form" label-width="80px">
      <el-form-item label="考试名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="课程">
        <el-select v-model="form.courseName" placeholder="请选择课程">
          <el-option
            v-for="(item, index) in courses"
            :label="item.name"
            :value="item.name"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间">
        <el-date-picker
          v-model="form.startTime"
          type="datetime"
          placeholder="选择开始时间"
          format="yyyy 年 MM 月 dd 日 HH点 mm分 ss秒"
          value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
          v-model="form.endTime"
          type="datetime"
          placeholder="选择结束时间"
          format="yyyy 年 MM 月 dd 日 HH点 mm分 ss秒"
          value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="描述">
        <el-input type="textarea" v-model="form.description"></el-input>
      </el-form-item>
      <el-row :gutter="20" v-for="(item, index) in form.examItemList" :key="index">
        <el-col :span="6">
          <el-form-item label="类型" label-width="80px">
            <el-select v-model="item.type">
              <el-option
                v-for="(item, ind) in options"
                :label="item"
                :value="item"
                :key="ind"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="分值" label-width="40px">
            <el-input v-model="item.score"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="题量" label-width="40px">
            <el-input v-model="item.num"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button type="danger" @click="delExamItem(item)">删除</el-button>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="success" @click="addExamItem">添加试卷信息</el-button>
        <el-button type="primary" @click="submitForm">创建考试</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
  import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
  export default {
    data () {
      return {
        form: {
          name: null,
          startTime: null,
          endTime: null,
          courseName: null,
          totalTime: null,
          ownerNickname: null,
          description: null,
          examItemList: [],
        },
        courses: [],
        options: [
          '选择题', '多选题', '填空题', '判断题'
        ],
        loading: false
      }
    },
    computed:{
      ...mapGetters([
        'userInfo',
      ]),
    },
    created () {
      this.getCourses()
    },
    methods: {
      addExamItem () {
        const examItem = {
          type: null,
          num: null,
          score: null,
        }
        this.form.examItemList.push(examItem)
      },
      delExamItem (id) {
        const index = this.form.examItemList.indexOf(id)
        if (index != -1) {
          this.form.examItemList.splice(index, 1)
        }
      },
      async submitForm () {
        this.loading = true
        this.form.ownerNickname = 'admin';
        const { data: res } = await this.$http.post('exam', this.form)
          .finally(() => {
            this.loading = false
          })
        if (res.code == 200) {
          return
        }
        this.$message.success('创建成功')
        this.form = {
          name: null,
          startTime: null,
          endTime: null,
          courseName: null,
          totalTime: null,
          ownerNickname: this.userInfo.username,
          description: null,
          examItemList: [],
        }
      },
      async getCourses () {
        const { data: res } = await this.$http.get('courses')
        if (res.code == 200) {
          return
        }
        this.courses = res.data.courses
      },
    }
  }
</script>

<style lang="scss" scoped>
  .add-exam {
    width: 800px;
    padding-top: 20px;

    .el-input {
      width: 300px;
    }

    .el-select {
      width: 300px;
    }

    .el-row {
      .el-input {
        width: 100%;
      }

      .el-select {
        width: 100%;
      }
    }
  }
</style>
